<template>
  <div class="home">
    <div class="header">
      <div class="fullbtn">
        <full-screen/>
      </div>
      <div class="title">
        <img class="logoStyle" :src="logo" alt="">
        <div class="split_line"></div>
        <span class="titlebox">
          IHE成品存储区
        </span>
      </div>
      <div class="time_container">
        <div class="view-showTime">
          <span class="time">{{ date }}</span>
          <span class="date">
            <span>{{ week }}</span>
            <span>{{ nowTime }}</span>
          </span>
        </div>
      </div>
    </div>
    <div class="container">
      <dv-border-box-10>
        <fin-pro-one/>
      </dv-border-box-10>
    </div>
  </div>
</template>

<script>
import FullScreen from '@/components/FullScreen.vue'
import FinProOne from '@/components/FinProTemStor/FinProOne.vue';
export default {
  components: { FullScreen, FinProOne },
  name: 'FinProTemStor',
  data () {
    return {
      logo: require('../assets/image/logo.png'),
      nowTime: "",
      week: "",
      date: "",
      timer: null,
      timer1: null,
      timer2: null,
      pageIndex: 1,
      reloadTime: null
    }
  },
  created () {
    this.getJsonData()
    // this.timer1=setInterval(this.addIndex, 10000);
  },
  mounted () {
    this.nowTimes();
    if (this.reloadTime) {
      clearInterval(this.reloadTime)
    } else {
      this.reloadTime = setInterval(() => {
        location.reload()
      }, 20*60*1000)
    }
  },
  methods: {
    getJsonData() {
      this.axios.get('/location.json').then(res => {
        if (res.status === 200 && res.statusText === "OK") {
          const finished = res.data.finishedLocation
          localStorage.setItem('finishedLocation', JSON.stringify(finished))
        }
      }).catch(error => { throw error })
    },
    timeFormate() {
      //显示当前时间
      let newDate = new Date();
      let year = newDate.getFullYear();
      let month =
        newDate.getMonth() + 1 < 10
          ? "0" + (newDate.getMonth() + 1)
          : newDate.getMonth() + 1;
      let date =
        newDate.getDate() < 10 ? ("0" + newDate.getDate()) : newDate.getDate();
      let hh =
        newDate.getHours() < 10 ? ("0" + newDate.getHours()) : newDate.getHours();
      let mm =
        newDate.getMinutes() < 10
          ? "0" + newDate.getMinutes()
          : newDate.getMinutes();
      let ss =
        newDate.getSeconds() < 10
          ? "0" + newDate.getSeconds()
          : newDate.getSeconds();
      let week = newDate.getDay();
      // console.log(week);
      let weeks = ["日", "一", "二", "三", "四", "五", "六"];
      let getWeek = "星期" + weeks[week];
      // console.log(getWeek);
      this.week = getWeek;
      // console.log(this.week)
      this.date = year + "." + month + "." + date;
      // console.log(this.date)
      this.nowTime = hh + ":" + mm + ":" + ss;
      // console.log(this.nowTime)
    },
    nowTimes() {
      this.timeFormate(new Date());
      setInterval(this.nowTimes, 1000);
      this.clear();
    },
    clear() {
      clearInterval(this.nowTimes);
      this.nowTimes = null;
    }
  },
  beforeDestroy() {
    clearInterval(this.timer);
    clearInterval(this.reloadTime)
    this.timer = null
    this.reloadTime = null
  }
}
</script>
<style lang="scss">
 .el-carousel__container {
    height: 100% !important;
  }
</style>
<style lang="scss" scoped>
.home{
  width: 100%;
  height: 100vh;
  background-image: url('../assets/image/pageBg.png');
  background-repeat: no-repeat;
  background-size: cover;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  .header{
    width:98%;
    height: 70px;
    background-image: url('../assets/image/bg_top.png');
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    .fullbtn{
      width: 30%;
    }
    .title{
      width:30%;
      height: 70px;
      // border-bottom: 5px solid #f0f;
      display: flex;
      justify-content: center;
      align-items: center;
      .titlebox{
        // border-right: 5px solid rgb(248, 59, 185);
        // border-left: 5px solid rgb(248, 59, 185);
        // border-radius: 5px 5px 0px 0px;
        font-size: 30px;
        margin-left: 10px;
      }
      .logoStyle{
        width: 100px;
        height: 60px;
      }
      .split_line{
        width: 2px;
        height: 60px;
        border-left: 3px solid #fff;
        margin-left: 10px;
      }
    }
    .time_container{
      width: 30%;
    }
    .view-showTime {
      position: relative;
      top: 0;
      right: 10;
      color: rgba(126, 240, 255, 0.7);
      .time {
        // margin-left: 0.5rem;
        font-size: 26px;
        // margin-right: 0.18rem;
      }
      .date {
        margin-left: 0.5rem;
        span {
          &:nth-child(1) {
            font-size: 20px;
            text-align: right;
          }
          &:nth-child(2) {
            font-size: 20px;
            margin-left: 0.5rem;
          }
        }
      }
    }
  }
  .container{
    width: 98%;
    height: calc(100% - 80px);
    // padding: 10px;
  }
}
</style>
